<template>
  <div id="register">
    <el-container style="overflow-y:hidden;overflow-x:hidden;">
      <!-- 布局容器 -->
      <el-main style="overflow-y:hidden;overflow-x:hidden;"> <!-- 布局容器 -->
        <div class="main">
          <!-- 主要内容  -->
          <div class="main-left">
            <!-- 左边主要内容 -->
            <div class="main-left-text">欢迎使用</div>
            <div class="main-left-content">
              <img src="../assets/zxwy.jpg" class="img" /><!--图片-->
              <div class="main-left-content-text">智学无忧商城后台登录</div>
            </div>
          </div>
          <div class="main-right">
            <!-- 右边主要内容 -->
            <div class="main-right-text">登录</div>
            <div class="main-right-content">
              <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="80px"
                class="elForm"
                status-icon
              >
              <!-- 输入框提交 -->
                <el-form-item prop="username">
                  <i class="el-icon-user"></i>
                  <el-input
                    v-model="form.username"
                    size="mini"
                    placeholder="请输入用户名"
                  ></el-input>
                </el-form-item>
                <!-- 用户名结束 -->
                <el-form-item prop="password">
                  <i class="el-icon-key"></i>
                  <el-input
                    v-model="form.password"
                    size="mini"
                    placeholder="请输入密码"
                    show-password
                  ></el-input>
                </el-form-item>
                <!-- 密码结束 -->
                <el-form-item prop="verifyCode">
                  <i class="el-icon-position"></i>
                  <el-input
                    v-model="form.verifyCode"
                    size="mini"
                    style="width:65%"
                    placeholder="请输入验证码"
                  ></el-input>
                  <el-button plain @click="open" class="verifycode">
                    验证码
                  </el-button>
                </el-form-item>
                <!-- 验证码结束 -->
                <el-form-item>
                  <el-checkbox
                    label="记住密码"
                    name="type"
                    v-model="checked"
                  ></el-checkbox>
                </el-form-item>
                <!-- 记住密码结束 -->
                <el-button
                  type="primary"
                  @click="onSubmit('form')"
                  plain
                  :loading="loadings"
                  class="login"
                  >登录</el-button>
              </el-form>
            </div>
            <div class="developer">开发者:{{ name }}</div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import Base64 from "../util/Base64";
import { loginByUsername } from "@/api/login";
import admin from "@/api/permission.js";
export default {
  data() {
    var username = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        let reg = /^\S{4,}$/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入字母、数字、下划线,长度不能少于4"));
        }
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        let reg = /^\S{6,}$/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("管理员密码长度应大于6"));
        }
      }
    };
    var verifyCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        let reg = /^\S{1,}$/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入字母、数字、下划线,长度不能少于1"));
        }
      }
    };
    return {
      checked: false, //记住密码
      loadings: false, //按钮加载状态
      name: "风萧落", //开发者
      form: {
        username: "", //用户名
        password: "", //密码
        verifyCode: "666666", //验证码
      },
      rules: {//正则表达式
        username: [{ validator: username, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        verifyCode: [{ validator: verifyCode, trigger: "blur" }],
      },
    };
  },
  created: function() {
    //记住密码下次登录
    this.checked = Cookies.get("checked");
    if (this.checked == "true") {
      this.form.username = Base64.decode(Cookies.get("username"));
      this.form.password = Base64.decode(Cookies.get("password"));
      this.checked = true;
    }
  },
  methods: {
    open(){//验证码
      this.$notify.error({
          title: '错误',
          message: '这是一条错误的提示消息'
        });
    },
    onSubmit(form) {//提交表格登录页面
      let that = this;//改变this指向
      this.$refs[form].validate((valid) => {//提交校验
        if (valid) {
          // 数据接口
          loginByUsername({//登录接口封装
            username:that.form.username,
            password:that.form.password,
            verifyCode:that.form.verifyCode
          }).then(res => {
            // console.log(res)
              if (res.data.errmsg == "成功") {
                var inFifteenMinutes = new Date(new Date().getTime() + 20 * 60 * 1000);
                Cookies.set("data", res.data.data,{expires:inFifteenMinutes});//存储令牌
                Cookies.set("checked", that.checked);
                admin.info().then(res=>{//权限设置
                  Cookies.set("info", res);
                })
                if(that.checked==true){
                   Cookies.set("username", Base64.encode(that.form.username));//存储用户名
                   Cookies.set("password", Base64.encode(that.form.password));//存储密码
                   Cookies.set("verifyCode", Base64.encode(that.form.verifyCode));//存储验证码
                }else{
                  Cookies.remove("username")
                  Cookies.remove("password")
                  Cookies.remove("verifyCode")
                }
                that.$message({
                  //成功
                  message: res.data.errmsg,
                  type: "success",
                });
                console.log(that.$route)
                if(that.$route.query.returnUrl===undefined){
                  that.$router.push("/homepage");
                }else{
                  that.$router.push(that.$route.query.returnUrl);
                }
              } else {
                that.loadings = true;//按钮加载状态
                that.$message.error(res.data.errmsg); //失败
                setTimeout(function() {
                  that.loadings = false;//按钮加载状态
                }, 1000);
              }
          })
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
.main-right-content .el-input__inner {/*文本框样式*/
  border-radius: 0px;
  border: 0px;
  background-color: #f5f7fa !important;
  border-bottom: #ebedf2 1px solid;
}
.verifycode{/*验证码按钮*/
  width:15%;background: #F5F7FA;margin-left:20px;color:#C0CFE2;border:0px;padding:0px;
}
.verifycode :hover{
  background-color:#F5F7FA ;
  color:#C0CFE2;
}
.elForm .el-form-item__content {
  margin: 0px !important;
}
.elForm .el-form-item__error {
  left: 35px;
}
</style>
<style lang="less" scoped>
// 媒体查询开始
@media (max-width: 1100px) {
  .el-main {
    padding: 0px;
  }
  .main {
    width: 100%;
  }
}
@media (max-height: 510px) {
  .el-main {
    padding: 0px;
  }
}
@media (max-width: 720px) {
  .el-input {
    width: 60% !important;
  }
}
@media (max-width: 570px) {
  .el-input {
    width: 40% !important;
  }
  .verifycode{
    display: none;
  }
}
// 媒体查询结束
#register {//登录开始
  width: 100%;
  height: 100vh;
  display: flex;
  align-content: center;
  background-image: url(../assets/cloud.jpg);
  background-repeat: "no-repeat";
  background-size: 100% 100%;
}
.el-main {
  display: flex;
  align-content: center;
}
.main {//登录主要内容
  width: 1000px;
  height: 500px;
  display: flex;
  margin: auto;
  box-shadow: -9px 8px 20px 0px #000;
}
.main-left {//主要内容左边
  width: 50%;
  height: 100%;
  background-color: #409eff;
  display: flex;
  flex-direction: column;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.main-left-text {//主要内容左边的文字
  margin: 20px 20px;
  color: #ffffff;
}
.main-left-content {//主要内容左边的内容
  margin-top: 80px;
  // margin:auto;
  text-align: center;
}
.img {//图片
  width: 80px;
  height: 80px;
}
.main-left-content-text {
  margin-top: 40px;
  font-size: 25px;
  color: #ffffff;
}
.main-right {//主要内容右边
  width: 50%;
  height: 100%;
  background-color: #f5f7fa;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.main-right-text {//主要内容右边的文字
  font-size: 20px;
  text-align: center;
  margin: 35px 15%;
  letter-spacing: 15px;
}
.main-right-content {//主要内容右边的内容
  margin: 30px 15%;
  font-size: 14px;
}
.el-form i {//图标
  margin-right: 20px;
}
.el-form-item__content {
  display: flex;
}
.el-input {//输入框
  width: 85%;
  border: 0px;
}
.developer {//开发者
  margin-top: 60px;
  text-align: center;
  font-size: 12px;
  color: #b2b2b2;
}
.login {/*按钮 */
  width: 100%;
}
</style>
